import React, { Component } from "react";

// 创建Context对象
const MyContext = React.createContext();
export default class Demo extends Component {
  state = { username: "zoe" };
  render() {
    return (
      <div>
        <h3>Demo组件</h3>
        <h4>我的用户名是:{this.state.username}</h4>
        <MyContext.Provider value={this.state.username}>
          <B username={this.state.username} />
        </MyContext.Provider>
      </div>
    );
  }
}

class B extends Component {
  render() {
    return (
      <div>
        <h3>B组件</h3>
        <h4>从A获取到的用户名是:{this.props.username}</h4>
        <C />
      </div>
    );
  }
}

// class C extends Component {
//   // 声明接收context
//   static contextType = MyContext;

//   render() {
//     return (
//       <div>
//         <h3>C组件</h3>
//         <h4>从A获取到的用户名是:{this.context}</h4>
//       </div>
//     );
//   }
// }

function C() {
  return (
    <div>
      <h3>C组件</h3>
      <h4>从A获取到的用户名是:
        <MyContext.Consumer>
          {
            value => {
              return value
            }
          }
        </MyContext.Consumer>
      </h4>
    </div>
  );
}
